<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <comment-list></comment-list>
        <comment-new></comment-new>
    </div>

    <!-- 评论模块 -->
    <template id="list">
        <div>
            <comment-item></comment-item>
            <comment-item></comment-item>
            <comment-item></comment-item>
        </div>
    </template>

    <!-- 每一条评论小模块 -->
    <template id="item">
        <div>
            <img src="logo192.png" alt="" width="50" height="50">
            <h3>你好啊</h3>
            <p>太快乐了太快乐了太快乐了太快乐了太快乐了太快乐了</p>
        </div>
    </template>

    <!-- 添加新评论模块 -->
    <template id="new">
        <div>
            <textarea cols="30" rows="10"></textarea>
            <button>点击发表评论</button>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var commentItem = {
            template: '#item'
        }
        var commentList = {
            template: '#list',
            components: {
                'comment-item': commentItem
            }
        }
        var commentNew = {
            template: '#new'
        }

        var vm =new Vue({
            el: '#app',
            data: {

            },
            methods: {
                
            },
            components: {
                'comment-list': commentList,
                'comment-new': commentNew
            }
        })
    </script>
</body>
</html>